<template>
  <el-dialog
    title="操作日志详细"
    :close-on-click-modal="false"
    v-model="isShow"
    width="800px"
    @close="close"
  >
    <el-form ref="form" :model="form" label-width="100px" size="mini">
      <el-row>
        <el-col :span="12">
          <el-form-item label="操作模块：">{{ form.title }} / {{ typeFormat(form) }}</el-form-item>
          <el-form-item
            label="登录信息："
          >{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="请求地址：">{{ form.operUrl }}</el-form-item>
          <el-form-item label="请求方式：">{{ form.requestMethod }}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="操作方法：">{{ form.method }}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="请求参数：">{{ form.operParam }}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="返回参数：">{{ form.jsonResult }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="操作状态：">
            <div v-if="form.status === 0">正常</div>
            <div v-else-if="form.status === 1">失败</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="操作时间：">{{ parseTime(form.operTime) }}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="异常信息：" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script lang="ts">
import { toRefs, computed, defineComponent } from 'vue'
import { useStore } from 'vuex'
import dialog from '@/mixins/dialog'
import { selectDictLabel } from '@/utils'
import moment from 'moment'
import { OperLog, StateType as OperLogStateType } from '@/store/modules/system/operLog'
import { DictData } from '@/store/modules/system/dictData'
export default defineComponent({
  name: 'LogDetail',
  emits: ['onRefresh', 'close'], // this line
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  setup(props, context) {
    const store = useStore<{operLog: OperLogStateType}>()
    const { dialogM } = dialog(props, context)
    const form = computed<OperLog>(() => {
      return store.state.operLog.data
    })
    const typeOptions = computed<Array<DictData>>(() => {
      return store.state.operLog.typeOptions
    })
    const typeFormat = (row: OperLog) => {
      return selectDictLabel(typeOptions.value, row.businessType)
    }
    const parseTime = (date: Date) => {
      return moment(date).format('YYYY-MM-DD')
    }
    return {
      parseTime,
      typeFormat,
      ...toRefs(dialogM),
      form
    }
  }
})
</script>
